<template>
    <ListPage ref="page" :query="query" :api="getGsJxList">
        <template #search="{ page, hiddenColumns }">
            <PageSearch ref="search" :query="query" :page="page" has-box @search="() => ($refs.page as any).getData()">
                <template #auth>
                </template>
                <template #input="{ }">
                    <ElFormItem label="公司" style="display: inline-block; margin-right: 10px;">
                        <ElSelect style="width: 200px;" filterable clearable :="$attrs" placeholder=""
                            v-model="query.companyNo">
                            <ElOption v-for="item in options" :key="item.val" :label="item.name" :value="item.val" />
                        </ElSelect>
                    </ElFormItem>
                    <ElFormItem label="月份" style="display: inline-block; margin-right: 10px;">
                        <ElDatePicker v-model="query.yf" type="month" placeholder="选择年月" format="YYYY-MM"
                            value-format="YYYY-MM" />
                    </ElFormItem>
                    <ElButton type="primary" @click="searchData">搜索</ElButton>
                </template>
            </PageSearch>
        </template>

        <template #table="{ data, hiddenColumns }">
            <ListTable :data="data" :hidden-columns="(hiddenColumns as any)">
            </ListTable>
        </template>

    </ListPage>

</template>

<script setup lang="ts">
import ListPage from '@/components/list-page/ListPage.vue'
import PageSearch from '@/components/list-page/PageSearch.vue'
import ListTable from './ListTable.vue'
import { ref, reactive, onMounted } from 'vue'
import { getGsJxList } from '../api'
import { getAllExName } from '@/views/menus/sub-account-distribution/api'

const query = reactive({
    keyword: '',
    yf: '',
    companyNo: ''
})

const page = ref()

const options = ref<Array<{ name: string, val: string }>>([])

const getOptions = () => {
    getAllExName()
        .then(res => {
            options.value = res
            console.log(options.value);
        })
}

onMounted(() => {
    getOptions()
})

const searchData = async () => {
    page.value.getData()
}
</script>